<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <link href="index.css" rel="stylesheet" type="text/css" />
    <link href="../common/salad.css" rel="stylesheet" type="text/css" />
    <link href="../left_menu/menu.css" rel="stylesheet" type="text/css" />
    <link href="../right_menu/right_menu.css" rel="stylesheet" type="text/css" />
    <link href="../categories/categories.css" rel="stylesheet" type="text/css" />
    <title>SALAD</title>
</head>

<body>
    <div id="salad-panel">
        <!--middle panel for presentation-->
        <div class="salad-middle-panel active">
            <p class="salad-main-bg-title">NEWEST</p>
            <p class="salad-main-title">SALAD</p>
            <div class="salad-middle-wrapper">
                <p id="salad-main-bg-vice-title">NEW FEATURES IN SHOP</p>
            </div>
            <div class="salad-middle-wrapper">
                <div class="salad-btn">VIEW MORE</div>
            </div>

        </div>

        <!--here is the page for all kinds of products
         we named this scope as CATEGORIES-->
        <div class="salad-middle-categories hidden">
            <div class="salad-middle-categories-title">
                <p>PRODUCTS</p>
                <div class="salad-categories-item">
                    <span class="salad-categories-right-item-text">LIVING ROOM</span>
                    <span class="salad-categories-item-img"></span>
                </div>
            </div>

            <div class="salad-middle-categories-body">

            </div>
        </div>

        <!--here is the page for single product
        we named this scope as PRODUCT-->
        <div class="salad-middle-product hidden">
        </div>

        <!--here is the page for search operation
        we named this scope as SEARCH-->
        <div class="sala-middle-search hidden">
        </div>


        <!--left menu for nvigation-->
        <div class="salad-left-menu">
            <div class="salad-menu-logo"></div>
            <ul class="salad-menu-items">
                <li class="salad-menu-item"><span class="home"></span></li>
                <li class="salad-menu-item"><span class="basket"></span></li>
                <li class="salad-menu-item"><span class="search"></span></li>
            </ul>
        </div>
        <!--right menu for product-->
        <div class="salad-right-menu turnoff">
            <div class="salad-right-menu-circle turnon">
                <!--<b class="list"></b>-->
                <span id="operation" class="list"></span>
            </div>

            <ul class="salad-menu-items">
                <li class="salad-menu-item"><span class="salad-menu-text">LIVING ROOM</span><span class="salad-menu-img LivingRoom"></span></li>
                <li class="salad-menu-item"><span class="salad-menu-text">OFFICE</span><span class="salad-menu-img Office"></span></li>
                <li class="salad-menu-item"><span class="salad-menu-text">KIDS</span><span class="salad-menu-img Kids"></span></li>
                <li class="salad-menu-item"><span class="salad-menu-text">KITCHEN</span><span class="salad-menu-img Kitchen"></span></li>
                <li class="salad-menu-item"><span class="salad-menu-text">ACCESORIES</span><span class="salad-menu-img Accesories"></span></li>
            </ul>
        </div>
    </div>

    <script src="../common/lib/require.js" data-main="config.js"></script>
</body>

</html>